<template>
    <div class="playlist clearfix">
        <div class="wrapper">
            <div class="tit clearfix">
                <h3>
                    <span>我收藏歌单</span>
                    <i class="icon"></i>
                    <span>({{mySonglistNum}})</span>
                </h3>
            </div>
            <ul class="cvrlist clearfix">
                <li v-for="item,index in mySonglist" :key="index">
                    <div class="cover pointer">
                        <img v-lazy="item.coverImgUrl">
                        <router-link  class="shadow" :to="{path:'/playlist',query:{id:`${item.id}`}}"></router-link>
                        <div class="bottom">
                            <span class="icon-headset"></span>
                            <span class="nb">{{item.playCount>10000?parseInt(item.playCount/10000)+'万':item.playCount}}</span>
                            <span class="icon-play"></span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>

        <div class="wrapper">
            <div class="tit clearfix">
                <h3>
                    <span>我收藏的专辑</span>
                    <i class="icon"></i>
                    <span>({{myAlbumsNum}})</span>
                </h3>
            </div>
            <ul class="m-list clearfix">
                <li v-for="album,index in myAlbums" :key="index">
                    <img v-lazy="album.blurPicUrl" />
                    <router-link :to="{path:'/album',query:{id:`${album.id}`}}"></router-link>
                    <p class="over name" :title="album.name">
                        <router-link :to="{path:'/album',query:{id:`${album.id}`}}" style="color:#333;">{{album.name}}</router-link>
                    </p>
                    <p class="over artist">
                        <span v-if="album.artist">
                           <router-link :to="{path:'/artist/song',query:{id:album.artist.id}}" :title="album.artist.name" class="underline">{{album.artist.name}}</router-link>
                        </span>
                    </p>
                    <a class="play"></a>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: "homeplaylist",
        data() {
            return {
                mySonglist: [],
                mySonglistNum: 0,
                myAlbums: [],
                myAlbumsNum: 0
            }
        },
        computed: {
            id(){
                return this.$route.query.id || localStorage.getItem('USERID');
            }
        },
        methods: {
            async getUserPlayList() {
                let obj = await this.$API.queryUserSonglist(localStorage.getItem('USERID'));
                if (obj.code == 200){
                    this.mySonglist = obj.result.playlists;
                    this.mySonglistNum = obj.result.total;
                }
            },
            async getUserAlbums() {
                let obj = await this.$API.queryUserCollectAlbums(localStorage.getItem('USERID'));
                if (obj.code == 200){
                    this.myAlbums = obj.result.useralbums;
                    this.myAlbumsNum = obj.result.total;
                }
            }
        },
        mounted(){
            this.getUserPlayList();
            this.getUserAlbums();
        }
    }
</script>

<style scoped lang="less">
    .playlist{
        margin-top: 40px;
        width: 100%;
        .wrapper{
            width: 100%;
            .tit{
                width: 100%;
                height: 35px;
                border-bottom: 2px solid #c20c0c;
                h3{
                    font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
                    // position: relative;
                    font-size: 20px;
                    line-height: 28px;
                    font-weight: normal;
                    color: #333;
                    .icon{
                        display: inline-block;
                        width: 8px;
                        height: 8px;
                        top: 1px;
                        background: url('../../images/black-r-icon@3x.png');
                        background-size: 8px;
                        position: relative;
                        top:-10px;
                        margin-right: 5px;
                    }
                }
            }
            .m-list {
                margin: 20px 0 0 -33px;
                width: 933px;

                li {
                    float: left;
                    width: 186px;
                    height: 208px;
                    padding: 0 0 30px 33px;
                    position: relative;
                    img {
                        width: 130px;
                        height: 130px;
                    }
                    >a {
                        width: 153px;
                        height: 130px;
                        position: absolute;
                        top: 0;
                        left: 33px;
                        background: url("./images/coverall.png") no-repeat 0 -845px;
                        &:hover {
                            cursor: pointer;
                        }
                    }
                    .name {
                        text-align: left;
                        color: #333;
                        font-family: Arial, Helvetica, sans-serif;
                        -webkit-text-size-adjust: none;
                        display: block;
                        margin: 8px 0 3px;
                        font-size: 14px;

                        &:hover {
                            cursor: pointer;
                            text-decoration: underline;
                        }
                    }
                    .artist{
                        a:hover{
                            color: #666;
                        }
                    }
                    .play {
                        position: absolute;
                        width: 28px;
                        height: 28px;
                        left: 130px;
                        top: 95px;
                        background: url("./images/iconall.png") no-repeat 0 -140px;
                        display: none;
                    }
                    &:hover .play {
                        display: block;
                    }
                }
            }
            .cvrlist{
                width: 950px;
                margin-left: -50px;
                margin-top: 20px;
                li{
                    float: left;
                    position: relative;
                    width: 190px;
                    height: 195px;
                    padding-left: 50px;
                    padding-bottom: 30px;
                    .cover{
                        width: 140px;
                        height: 140px;
                        img{
                            width: 140px;
                            height: 140px;
                        }
                        .shadow{
                            width: 140px;
                            height: 140px;
                            position: absolute;
                            top: 0;
                            left: 50px;
                            background: url('../../images/coverall.png') no-repeat 0  0;
                        }
                        .bottom{
                            position: absolute;
                            bottom: 94px;
                            top: 113px;
                            width: 140px;
                            height: 27px;
                            background: url('../../images/coverall.png') no-repeat;
                            background-position: 0 -537px;
                            color: #ccc;

                            .icon-headset{
                                float: left;
                                width: 14px;
                                height: 11px;
                                margin: 9px 5px 9px 10px;
                                background: url('../../images/iconall.png') no-repeat 0 -24px;
                            }

                            .nb{
                                display: block;
                                text-align: -webkit-match-parent;
                                word-wrap: break-word;
                                word-break: break-word;
                                font-size: 12px;
                                float: left;
                                margin: 7px 0 0 0;
                                font-family: Arial, Helvetica, sans-serif;
                                -webkit-text-size-adjust: none;
                            }

                            .icon-play{
                                position: absolute;
                                float: right;
                                right: 10px;
                                bottom: 5px;
                                width: 16px;
                                height: 17px;
                                background: url('../../images/iconall.png') no-repeat 0 0;

                                &:hover{
                                    background-position: 0px -60px;
                                    cursor: pointer;
                                }
                            }
                        }
                    }
                    p{
                        margin: 8px 0 3px;
                        font-size: 14px;
                        color: #000;
                        a{
                            color: #000;
                            &:hover{
                                color: #000;
                            }
                        }
                    }
                }
            }
        }
    }
</style>